<template>
    <div>
        <h1>人员列表</h1>
        <input type="text" placeholder="input your name" v-model="name">
        <button @click="add">add</button>
        <ul>
            <li v-for='p in personList' :key="p.id">{{p.name}}</li>
        </ul>
    </div>
</template>

<script>
    import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
    import {nanoId} from 'nanoId'
    export default {
        name : "Person",
        data(){
            return {
                name:"",
            }
        },
        computed:{
            ...mapState('personOptions',['personList']),
        },
        methods:{
            add(){
                const personObj = {
                    id:nanoId(),
                    name:this.name
                }
                // 手动写法
                // this.$state.comit('personOptions/addPerson',personObj)
                // 用自动生成后的写法
                addPerson(personObj)
            },
            ...mapMutations('personOptions',[addPerson]),
            addPersonServer(){
                this.$store.dispatch("personOptions/getPersonFromServer")
            },
        }
    }
</script>

<style scoped>

</style>